<template>
	<view>
		<view class="detail-top bg-white">
			<video v-if="movie.urlJson" v-for="(item,index) in movie.urlJson" :src="item.upload_percent" style="width: 100%;" loop muted :show-play-btn="true"  objectFit="cover" ></video>
			<view class="frame margin-sm">
				<view class="text-lg text-bold margin-bottom-xs text-black">{{movie.name}}</view>
				<view class="text-sm text-gray margin-bottom-sm">{{movie.sucai_miaosu}}</view>
				<view class="flex justify-between align-center">
					<view>
						<button class="cu-btn radio bg-cyan sm">{{movie.qian}} 元</button>
<!--						<text class="text-blue margin-lr-sm">充值送V币</text>-->
						<text class="">{{dianji.shoucang+'人'}}收藏</text>
					</view>
<!--					<button class="cu-btn line-gray shadow sm" >举报作品</button>-->
				</view>
			</view>
			<view class="frame margin-sm text-gray">
				<view class="margin-bottom-xs flex justify-between align-center">
					<text>类型：{{movie.leixing}}</text>
					<view @tap="showData=!showData;">
						<text>更多</text>
						<text :class="showData?'cuIcon-fold':'cuIcon-unfold'"></text>
					</view>
				</view>
				<view class="margin-bottom-xs">音频：{{movie.yinping}}</view>
				<view class="margin-bottom-xs">适用软件：{{movie.ruanjian}}</view>
				<view class="margin-bottom-xs">分辨率：{{movie.fenbianlu}}</view>
				<view class="margin-bottom-xs">可修改范围：{{movie.fanwei}}</view>
				<view v-show="showData">
					<view class="margin-bottom-xs">上传日期：{{movie.create_time}}</view>
					<view class="margin-bottom-xs">文件大小：{{movie.size}}</view>
					<view class="margin-bottom-xs">编号：{{movie.id}}</view>
					<view class="margin-bottom-xs">点击：{{dianji.dianji+'次'}}</view>
					<view class="margin-bottom-xs">下载：{{dianji.xiazai+'次'}}</view>
					<view class="margin-bottom-xs">销售额：{{}}</view>
				</view>
<!--				<view class="flex align-center margin-top">-->
<!--					<button class="cu-btn radio sm margin-right-sm">已实名签约</button>-->
<!--					<button class="cu-btn radio sm margin-right-sm">原创证明</button>-->
<!--					<button class="cu-btn radio sm margin-right-sm">推荐</button>-->
<!--				</view>-->
			</view>
<!--			<view class="copyright margin-sm">-->
<!--				<view class="text-lg text-bold margin-bottom text-black">版权资料</view>-->
<!--				<view class="flex align-center text-gray">-->
<!--					<view class="margin-right-sm">-->
<!--						<image class="margin-bottom-xs" src="../../images/SimpleMovie.jpeg"></image>-->
<!--						<view>签约声明</view>-->
<!--					</view>-->
<!--					<view class="margin-right-sm">-->
<!--						<image class="margin-bottom-xs" src="../../images/SimpleMovie.jpeg"></image>-->
<!--						<view>原创证明</view>-->
<!--					</view>-->
<!--				</view>-->
<!--			</view>-->
		</view>
		<!-- <view class="detail-center bg-white margin-bottom-sm">
			<view class="flex align-center justify-between padding-tb">
				<view class="flex align-end">
					<view class="cu-avatar round lg margin-right-sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);"></view>
					<view>
						<view class="text-black text-bold margin-bottom-xs">设计师：{{user.user_name}}</view>
						<view class="flex align-center">
							<image class="icon-img" src="../../static/tabBar/category_selected.png"></image>
							<button class="cu-btn radio bg-cyan sm margin-left-sm">个人签约</button>
						</view>
					</view>
				</view>
				<view class="text-gray" @tap="suspend">
					<text>进入店铺</text>
					<text class="cuIcon-right"></text>
				</view>
			</view>
			<view class="box-center flex align-center justify-between padding-tb">
				<text>近30天收入</text>
				<text>4003.5元</text>
			</view>
			<view class="flex align-center justify-between padding-tb">
				<text>作品数</text>
				<text>155</text>
			</view>
		</view> -->
		<view class="detail-bottom bg-white" v-for="(item,index) in downPathArray">
			<!-- <view class="flex align-center justify-between margin-bottom">
				<view class="list-item" v-for="(item,index) in 2" :key="index">
					<image class="main-img" src="https://pic.vjshi.com/2020-07-11/8eaa1a14bf9b0a37c72b2a0b69656f5c/online/main.jpg?x-oss-process=style/resize_w_285"></image>
					<view class="flex align-center justify-between margin-tb-xs">
						<text class="item-tilte">三维复古中式卷轴打开仿古地图卷轴打开</text>
						<image class="icon-img" src="../../static/tabBar/category_selected.png"></image>
					</view>
					<view class="flex align-center justify-between text-gray">
						<text class="">20小时前</text>
						<text class="">荐</text>
					</view>
				</view>
			</view>
			 <view class="flex align-center justify-between">
				<view class="list-item" v-for="(item,index) in 4" :key="index">
					<image class="main-img" src="https://pic.vjshi.com/2020-07-11/8eaa1a14bf9b0a37c72b2a0b69656f5c/online/main.jpg?x-oss-process=style/resize_w_285"></image>
					<view class="flex align-center justify-between margin-tb-xs">
						<text class="item-tilte">三维复古中式卷轴打开仿古地图卷轴打开</text>
						<image class="icon-img" src="../../static/tabBar/category_selected.png"></image>
					</view>
					<view class="flex align-center justify-between text-gray">
						<text class="">20小时前</text>
						<text class="">荐</text>
					</view>
				</view>
			</view> --> 
			{{item}}
		</view>
		
		<view class="cu-modal" :class="showMenu?'show':''" @tap="showMenu=false;">
			<view class="cu-dialog">
				<view class="menu-item" @tap="showMenu=false;">
					<view>
						<text class="cuIcon-home margin-right-xs"></text>
						<text>首页</text>
					</view>
					<text class="cuIcon-right"></text>
				</view>
				<view class="center-menu menu-item" @tap="showMenu=false;">
					<view>
						<text class="cuIcon-list margin-right-xs"></text>
						<text>分类</text>
					</view>
					<text class="cuIcon-right"></text>
				</view>
				<view class="menu-item" @tap="showMenu=false;">
					<view>
						<text class="cuIcon-people margin-right-xs"></text>
						<text>个人</text>
					</view>
					<text class="cuIcon-right"></text>
				</view>
			</view>
		</view>
		
		
		<view class="perch"></view>
		<view class="bottom-btn cu-bar bg-white tabbar border">
			<button class="action" open-type="contact" @tap="suspend">
				<view class="cuIcon-service text-green">
				</view>
				客服
			</button>
			<view class="action text-orange" @tap="tapShoucang">
				<view class="cuIcon-favorfill"></view>
				{{ shoucang ? '已收藏' : '未收藏' }} 
			</view>
			<view class="action" @tap="suspend">
				<view class="cuIcon-message">
					<view class="cu-tag badge">99</view>
				</view>
				评论
			</view>
			<view class="bg-blue submit" @tap="down">下载</view>
		</view>
	</view>
</template>

<script>
	export default {

		async onLoad(e){
			this.caozuo.sucai_id = e.id;
			
			this.$httpApi.insert("Sp_user_caozou",this.caozuo
			) 
			let data = await this.$httpApi.query({
				"Sp_material": {
					id: e.id
				}
			});
			this.dianji =await this.$httpWay.post("querydianjinum",{
				sucai_id :e.id
			})
			console.log(this.dianji);
			let userInfo = this.$store.state.user;
			this.movie = data.Sp_material;
			this.user = userInfo;
			
			//
			this.ifShoucang();
		},

		data() {
			return {
				id : this.$moment.now().valueOf(),
				showMenu: false,
				showData: false,
				user:{},
				dianji:{},
				movie:{},
				caozuo:{
					user_id:this.$store.state.user.id,
					sucai_id: this.sucai_id,
					status:1
				},
				shoucang : '',
				downPathArray : []
			};
		},
		methods: {
			tapShoucang(){
				this.caozuo.status = 2;
				if( this.shoucang){
					this.$httpApi.remove("Sp_user_caozou", this.caozuo)
					this.shoucang = '';
				}else{
					this.$httpApi.insert("Sp_user_caozou", this.caozuo)
					this.shoucang = this.caozuo;
				}
				// this.ifShoucang();
			},
			//
			async ifShoucang(){
				// 查看是否已收藏.
							/**
				user_id integer(30) comment ‘用户id’,
				sucai_id integer(30) comment ‘素材id’,
				status integer(30) comment ‘操作类型: 下载,收藏,点击,’,
							 */
							this.caozuo.status = 2;
							this.shoucang = await this.$httpApi.query({
								"Sp_user_caozou": this.caozuo
							});
							this.shoucang = this.shoucang.Sp_user_caozou;
			},
			async down(){
				/**
				  model.setBody("我是测试数据");
				         model.setSubject("App支付测试Java");
				         model.setOutTradeNo("订单号10000");
				         model.setTimeoutExpress("30m");
				         model.setTotalAmount("0.01");
				 */
				const that = this;
				// if( !this.caozuo.user_id){
				// 	uni.showModal({
				// 		    title: '请登录后下载',
				// 		    content: '登录后无限下载次数',
				// 			confirmText : '去登录',
				// 		    success: function (res) {
				// 		        if (res.confirm) {
				// 					that.navigateTo('/pages/login/login');
				// 		        } else if (res.cancel) {
				// 		            console.log('用户点击取消');
				// 		        }
				// 		    }
				// 	});
				// }
					
					let reqdata = {
						order : this.id + '|' + this.movie.id,
						totalAmount : this.movie.qian,
						body : this.movie.sucai_miaosu ,
						subject : this.movie.name
					};    
					// let reqdata = {
					// 	order : '100004222', 
					// 	totalAmount : ""+this.movie.qian,
					// 	body : '我是测试数据',
					// 	subject : 'App支付测试Java'  
					// };    
					let orderInfo =await this.$httpFuck.post('ali/generateOrder',reqdata);
					console.log(reqdata,orderInfo);
					uni.requestPayment({
							provider: 'alipay',
							orderInfo: orderInfo ,
							success: function(res) {
								console.log('success:' + JSON.stringify(res));
								 
								that.caozuo.status = 3;
								that.$httpApi.insert("Sp_user_caozou", that.caozuo)
								for (var i = 0; i < that.movie.urlJson.length; i++) {
									let url = that.movie.urlJson[i];
									let count = i+1;
									that.downloadFile(url.upload_percent,`正在下载第${count}个视频`,res1 => {
										let show = `第${count}个文件下载存放的路径是${res1.tempFilePath}`;
										uni.showToast({
											title: show
										})
										that.downPathArray.push(show);
										console.log(show);
									})
								}
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
							}
					});
			}
		},
		onNavigationBarButtonTap(e) {
			if (e.index === 0) this.showMenu = !this.showMenu;
		},
	}
</script>

<style lang="scss">
.cu-modal{
	.menu-item{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40upx;
	}
	.center-menu{
		border-top: 1px solid #e9e9e9;
		border-bottom: 1px solid #e9e9e9;
	}
}
	
.frame{
	padding-bottom: 30upx;
	border-bottom: 1px solid #e9e9e9;
}
.copyright{
	padding-bottom: 20upx;
	image{
		width: 150upx;
		height: 250upx;
	}
}
.detail-center{
	padding: 0 20upx;
	.icon-img{
		width: 50upx;
		height: 50upx;
	}
	.box-center{
		border-top: 1px solid #e9e9e9;
		border-bottom: 1px solid #e9e9e9;
	}
}
.detail-bottom{
	padding: 40upx 20upx;
	.list-item{
		width: 345upx;
		overflow: hidden;
		.main-img{
			width: 100%;
			height: 173upx;
		}
		.item-tilte{
			width: 100%;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			text-align: justify;
			overflow: hidden;
		}
		.icon-img{
			width: 30upx;
			height: 30upx;
		}
	}
}
.perch{
	height: 100upx;
}
.bottom-btn{
	width: 100%;
	position: fixed;
	bottom: 0px;
}
</style>
